<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Binding Cell Phone</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1516407_fx9en0nm4fw.css">
    <link rel="stylesheet" href="../../css/shouye.css">
    <style>
        body,html {
            width: 100%;
            /* height: 3000px; */
        }
        #wrap{
            width:100%;
        }
        .m-right {
            width: 100%;
            height: 100%;
            /* border: 1px solid #e7e7e7; */
            position: relative;
        }

        .m-right h3 {
            font: 16px/47px "微软雅黑";
            font-weight: 100;
            text-indent: 1em;
            border-bottom: 1px solid #e7e7e7;
        }

        .m-right ul li {
            float: left;
            font: 16px/28px "微软雅黑";
            width: 11.5%;
            border-right: 1px solid #e7e7e7;
            text-align: center;
            margin-top: 20px;
            color: #999;
        }

        .m-right ul li:nth-child(1) i {
            background-color: #f08200;
            color: #fff;
            width: 60%;
            display: inline-block;
            font-style: normal;
        }

        .m-right ul li:last-child {
            margin-left: 5%;
            color: #6ba063;
            text-decoration: underline;
            border: 0px;
        }

        .m-right ul li:nth-child(7) {
            border: 0px;
        }

        .m-right ol li {
            width: 95.94%;
            border: 1px solid #e7e7e7;
            margin-left: 2%;
            margin-top: 20px;
            height: 284px;
        }

        .m-right ol li:nth-child(1) {
            margin-top: 80px;
        }

        .m-right ol li h4 {
            background-color: #f2f2f2;
            font: 14px/46px "微软雅黑";
            font-weight: 500;
            text-indent: 1em;
            margin-top: -5px;
            display: flex;
            justify-content: space-around;
        }

        /* .m-right ol li h4 span:nth-child(2){
            margin-left:10%;
            margin-right:10%;
        } */
        .m-right ol li h4 span:nth-child(3) {
            color: #6ba063;
            /* margin-right:12%; */
        }

        .m-right ol li h4 span:nth-child(5) {
            color: #f08200;
        }

        .l-left,
        .l-center,
        .l-right {
            float: left;
            height: 243px;
            margin-top: -11px;
            font: 14px/86px "微软雅黑";
        }

        .l-left {
            width: 59%;
            border-right: 1px solid #e7e7e7;
        }

        .l-left .le-top {
            margin-top: 10px;
            height: 116px;
            position: relative;
        }

        .le-font{
            width: 70%;
            height:100%;
            position: absolute;
            top:0px;
            right:0px;
        }

        .l-left .le-top img {
            margin-top: 13px;
            margin-left: 3%;
        }

        .l-left .le-top:nth-child(1) {
            border-bottom: 1px solid #e7e7e7;
        }

        .l-left .le-top span:nth-child(3) {
            margin-left: 11%;
            margin-right: 15%;
            color: #999;
        }

        .l-left .le-top span:nth-child(4) {
            color: #999;
        }

        .l-center {
            width: 24%;
            border-right: 1px solid #e7e7e7;
        }

        .l-center p {
            font: 14px/30px "微软雅黑";
            color: #999;
            text-align: center;
        }

        .l-center p:nth-child(1) {
            margin-top: 85px;
        }

        .l-right {
            width: 14%;
        }

        .l-right h5,
        .l-right form {
            font: 14px/30px "微软雅黑";
            text-align: center;
        }

        .l-right h5 {
            color: #6ba063;
            margin-top: 75px;
            text-decoration: underline;
        }

        .l-right input {
            background-color: #f08200;
            color: #fff;
            border: 0px;
            border-radius: 7px;

        }

        .l-right input:nth-child(2) {
            background: #999999;
            margin-top: 10px;
        }

        .l-right input:nth-child(2) {
            background: #f08200;
            margin-top: 10px;
        }

        .l-right input:nth-child(3) {
            margin-top: 10px;
        }

        .m-right ol li:nth-child(5) .l-right h5 {
            color: #6ba063;
            margin-top: 45px;
            text-decoration: underline;
        }

        .bottom {
            margin-left: 15%;
            margin-top: 30px;
        }

        .bottom span {
            width: 5%;
            display: inline-block;
            height: 30px;
            background: #fff;
            text-align: center;
            line-height: 30px;
            color: #000;
            margin-left: 2%;
        }

        .bottom span:nth-child(1) {
            background: #dddddd;
            color: #fff;
        }

        .bottom span:nth-child(2),
        .bottom span:nth-child(8) {
            background: #498e3d;
            color: #fff;
        }

        .bottom input {
            border: 0px;
            background: #f08200;
            color: #fff;
            width: 5%;
            height: 30px;
        }

        .l-right input {
            width: 60%;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <div class="m-right">
            <h3>我的订单</h3>
            <ul>
                <li>
                    <i>全部</i>
                </li>
                <li>待付款</li>
                <li>待发货</li>
                <li>待收货</li>
                <li>待评价</li>
                <li>退款/售后</li>
                <li>已完成/关闭</li>
                <li>订单回收站</li>
            </ul>
            <ol>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：<em>关闭</em></span>

                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>

                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                    <span>云南昭通丑苹果</span>
                                    <span>6个装</span>
                                    <span>￥35.0*1</span>
                                </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                        <form>
                            <input type="button" value="删除订单">
                        </form>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>待付款</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                    <span>云南昭通丑苹果</span>
                                    <span>6个装</span>
                                    <span>￥35.0*1</span>
                                </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                    <span>云南昭通丑苹果</span>
                                    <span>6个装</span>
                                    <span>￥35.0*1</span>
                                </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                        <form>
                            <input type="button" value="去支付">
                            <input type="button" value="取消订单">
                        </form>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>待发货</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                        <form>
                            <input type="button" value="申请退款">
                        </form>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>已发货</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                        <form>
                            <input type="button" value="确认收货">
                            <input type="button" class="Look" value="查看物流">
                        </form>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>已收货</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                        <form>
                            <input type="button" value="申请退款">
                            <input type="button" value=" 去评价 ">
                            <input type="button" value="交易完成">
                        </form>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>申请退款中</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>退款中</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>退款中</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                    </div>
                </li>
                <li>
                    <h4>
                        <span>订单号：169928374688362</span>
                        <span>下单日期：2015.04.09 18：03：53</span>
                        <span>爱果果水果店</span>
                        <span>订单状态：</span>
                        <span>退款失败</span>
                    </h4>
                    <div class="l-left">
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                        <div class="le-top">
                            <b>
                                <img src="../../img/img-JL/apple.png" alt="">
                            </b>
                            <div class="le-font">
                                <span>云南昭通丑苹果</span>
                                <span>6个装</span>
                                <span>￥35.0*1</span>
                            </div>
                        </div>
                    </div>
                    <div class="l-center">
                        <p>店铺合计：￥105.0</p>
                        <p>（含运费：￥8.0）</p>
                    </div>
                    <div class="l-right">
                        <h5>查看详情</h5>
                        <form>
                            <input type="button" value="申请平台介入">
                        </form>
                    </div>
                </li>
            </ol>
            <div class="bottom">
                <span>
                    < </span> <span> 1
                </span>
                <span> 2 </span>
                <span> 3 </span>
                <span> 4 </span>
                <span> ... </span>
                <span> 10 </span>
                <span> > </span>
                <span> /10 </span>
                <input type="button" value="跳转">
            </div>
        </div>
    </div>
</body>

</html>